<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
  <title>用户管理-链上善行</title>
  <!-- Favicon and Touch Icons -->
  <link href="common/favicon1.png" rel="shortcut icon" type="image/png">
  <link rel="stylesheet" href="background/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="background/modules/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="background/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

  <link rel="stylesheet" href="background/modules/flag-icon-css/css/flag-icon.min.css">
  <link rel="stylesheet" href="background/css/style.css">
  <link rel="stylesheet" href="common/css/glyphicon.css">
  <!--引入Jqgrid的核心CSS-->
  <link rel="stylesheet" href="common/grid/ui.jqgrid-bootstrap.css">
  <style>
    th{
      text-align: center;
    }
    #userList .success,#userList .active{
      background: #c9dcdd;
    }
  </style>
</head>

<body>
<div id="app">
  <div class="main-wrapper">
    <div class="navbar-bg"></div>
    <div th:replace="commons/admin-bar::navbar(currUri='account-detail')"></div>
    <div th:replace="commons/admin-bar::sidebar(currUri='account-detail')"></div>

    <div class="main-content">
      <section class="section">
        <h1 class="section-header">
          <div><i class="ion ion-person-stalker"></i> 资金管理</div>
        </h1>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="card mb-3">
              <div class="card-body">
                <!--定义jqgrid表格标签-->
                <table id="userlist"></table>
                <!--定义分页栏标签-->
                <div id="pager"></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
<!--引入Jquery-->
<script src="common/js/jquery-3.4.1.js"></script>
<script src="background/modules/jquery.min.js"></script>
<script src="background/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="background/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="background/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="background/js/sa-functions.js"></script>
<script src="background/js/scripts.js"></script>
<!--引入jqgrid的核心JS-->
<script src="common/grid/jquery.jqGrid.min.js"></script>
<!--引入jqgrid的国际化JS-->
<script src="common/grid/grid.locale-cn.js"></script>
<script>
  $(function () {
    // 初始化表格
    $.ajax({
      url: "donations/getDonationsPage",
      type: "GET",
      dataType: "json",
      success: function(response) {
        if (response.code === 200) {
          var userListData = response.data; // 获取用户列表数据
          // 在这里使用jqGrid初始化表格并传入jqGridData
          $('#userlist').jqGrid({
            // 其他配置参数
            data: userListData, // 将处理后的数据传入jqGrid
            datatype: "local",
            colNames:["ID","捐款金额","捐款人","评留言","项目名称","捐款时间"],
            colModel: [
              { name: "id", index: 'id', width: 50 },
              { name: "amount", index: 'amount', width: 100 },
              { name: "username", index: 'username', width: 80 },
              { name: "message", index: 'message', width: 120 },
              { name: "projectName", index: 'projectName', width: 120 },
              {
                name: "createTime",
                index: 'createTime',
                width: 120,
                formatter: function (cellvalue, options, rowObject) {
                  if (!cellvalue) {
                    return ""; // 处理空日期值的情况
                  }

                  var dateParts = cellvalue.split(" ");
                  var datePart = dateParts[0].split("-");
                  var timePart = dateParts[1].split(":");
                  var year = parseInt(datePart[0]);
                  var month = parseInt(datePart[1]) - 1; // 月份从0开始
                  var day = parseInt(datePart[2]);
                  var hour = parseInt(timePart[0]);
                  var minute = parseInt(timePart[1]);
                  var second = parseInt(timePart[2]);
                  var date = new Date(year, month, day, hour, minute, second);
                  return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                  });
                }
              }
            ],
            pager : "#pager", // 定义分页工具栏
            viewrecords : true, // 展示总条数
            rowNum : 10, // 每页展示的条数,默认20
            rowList : [5,10,25,50,100,], // 显示下拉列表供用户自定义显示每页条数
            styleUI : "Bootstrap", // 指定主题样式
            hidegrid : false, // 禁用标题旁边的折叠按钮
            autowidth : true, // 自适应父容器的宽度,铺满屏幕
            height : 500, // 指定高度,单位px
            page : 1, // 初始页码
            pagerpos : "center", // 指定分页工具栏的位置,默认center
            editurl : "editUser" // 编辑的URL
          }).navGrid(
                  /*
                      快速加入编辑功能
                   */
                  // 参数1: 将快速编辑放入哪个位置
                  "#pager",
                  // 参数2: 展示编辑的配置对象
                  {add:false,edit:true,del:true,search:true,refresh:true},
                  // 参数3: 编辑面板的配置
                  {reloadAfterSubmit: true,closeAfterEdit: true},
                  // 参数4: 添加面板的配置
                  {reloadAfterSubmit: true,closeAfterAdd: true},
                  // 参数5: 删除面板的配置
                  {reloadAfterSubmit: true,closeAfterDelete: true},
                  // 参数6: 搜索面板的配置
                  {reloadAfterSubmit: true,closeAfterSearch: true,sopt:['eq']},
                  // 参数7: 刷新的配置
                  {},
          );;
        } else {
          console.error("Failed to retrieve user data");
        }
      },
      error: function(xhr, status, error) {
        console.error("Error occurred while fetching user data");
      }
    });
  });
</script>

</body>
</html>
